{% extends "UiManager/base.html" %}
{% block title %}新增用例{% endblock %}
{% block location %}
    <div class="am-icon-home fa fa-home" style="font-weight: bold;color: grey; float: right;">&nbsp;当前位置： 用例管理 > 新增用例</div>
{% endblock %}
{% load staticfiles %}
{% block css %}
{% endblock %}
{% block js %}

    <script>

        function gotoAddStep() {
            var project_id = $("#projectSelect option:selected").val();//选择操作
            if (project_id == "none") {
                alert("请先选择项目");
                return;
            }

            // 相聚选择的项目查询页面
            $.ajax({
                url: '/ui/get_page_by_project/',
                type: 'post',
                dataType: 'json',
                data: JSON.stringify({"project_id": project_id}),
                success: function (res) {
                    console.log(res)
                    if (res.status == 0) {
                        // 构造页面select
                        var pages = '';
                        for (var i = 0; i < res.content.length; i++) {
                            pages += '<option value="' + res.content[i]["id"] + '">' + res.content[i]["page_name"] + '</option>';
                        }
                        var tr_index = $(".step-tr") ? $(".step-tr").length : 0;
                        // 元素select
                        var options = '';
                        {% for opration in opration_obj %}
                            options += '<option value="{{ opration.opration_name }}">{{ opration.simple_desc }}</option>';
                        {% endfor %}

                        var index = tr_index + 1;
                        var tr = "<tr class='step-tr'>";
                        tr += "<td class='center'>" + index + "</td>";
                        tr += "<td><select class='form-control step-operate' onchange='operateChange(this)' id='step-operate_" + index + "'><option value='none'>请选择</option>" + options + "</select></td>";
                        tr += "<td><select class='form-control step-page' onchange='queryEleByPage(this)' id='step-page_" + index + "'><option value='none'>请选择</option>" + pages + "</select></td>";
                        tr += "<td><select class='form-control step-ele' id='step-ele_" + index + "'><option value='none'>请选择</option></select></td>";
                        tr += "<td><input class='form-control step-data' id='step-data_" + index + "'/></td>";
                        tr += "<td><input type='checkbox' class='form-control step-must' checked id='step-must_" + index + "'/></td>";
                        tr += "<td width='160px'><a class='btn-sm btn-danger' href='#' onclick='deleteStep(this)' id='step-del_" + index + "'>删除</a>";
                        tr += "<a class='btn-sm btn-info' href='#' onclick='up(this)' id='step-up_" + index + "'>上移</a>";
                        tr += "<a class='btn-sm btn-info' href='#' onclick='down(this)' id='step-down_" + index + "'>下移</a></td>";
                        tr += "</tr>";
                        $("#steps").append(tr);

                    }
                }
            });
        }

        /**
         * 根据页面查询元素
         */
        function queryEleByPage(ele) {
            var element_id = ele.id.split("_")[1];
            $("#step-ele_" + element_id + " option[index != '0']").remove();
            if (ele.value == 'none') {
                return;
            }
            $.ajax({
                url: '/ui/get_element_by_page/',
                type: 'post',
                dataType: 'json',
                data: JSON.stringify({"id": ele.value}),
                success: function (res) {
                    console.log(res)
                    if (res.status == 0) {
                        var eles = ''
                        {#if (keywordId == 'click') {#}
                        for (var i = 0; i < res.content.length; i++) {
                            eles += '<option value="' + res.content[i]["id"] + '">' + res.content[i]["element_name"] + '</option>';
                        }
                        $("#step-ele_" + element_id).append(eles);
                        {# }#}
                    }
                }
            });
        }

        /**
         * 删除步骤
         */
        function deleteStep(ele) {
            $(ele).parents("tr").remove();
        }

        /**
         * 监控"操作"下拉列表
         */
        function operateChange(ele) {
            var element_id = ele.id.split("_")[1];
            var value = $(ele).val();
            if (value == "click" || value == 'check') {
                // 断言
                $("#step-data_" + element_id).hide(); // 输入框隐藏
                $("#step-page_" + element_id).show();
                $("#step-ele_" + element_id).show();
            } else if (value == "swipLeft" || value == "swipRight" || value == "swipUp" || value == "swipDown" || value == "function" || value == "tap" ){
                $("#step-page_" + element_id).hide();
                $("#step-ele_" + element_id).hide();
                $("#step-data_" + element_id).show();
            } else {
                $("#step-data_" + element_id).show(); // 输入框显示
                $("#step-page_" + element_id).show();
                $("#step-ele_" + element_id).show();
            }
        }

        /**
         * 保存用例
         */
        function saveCase() {
            var steps = [];
            var trs = $("#steps").find("tr");
            if (!trs) {
                alert("请添加操作步骤");
                return;
            }
            for (var i = 0; i < trs.length; i++) {
                var operation = $(trs[i]).find(".step-operate").eq(0).val();
                var ele_id =$(trs[i]).find(".step-ele").eq(0).val();
                var input_data = $(trs[i]).find(".step-data").eq(0).val();
                var step_must = $(trs[i]).find(".step-must").eq(0).is(":checked");
                if (operation == "click" || operation == "check") {
                    steps.push({
                        "operation_name": operation,
                        "element_id": ele_id,
                        "step_must": step_must
                    });
                } else if (operation == "input") {
                    steps.push({
                        "operation_name": operation,
                        "element_id": ele_id,
                        "input_data": input_data,
                        "step_must": step_must
                    });
                } else if (operation == "swipLeft" || operation == "swipRight" || operation == "swipUp" || operation == "swipDown" || operation == "function" || operation == "tap") {
                    steps.push({
                        "operation_name": operation,
                        "input_data": input_data
                    });
                } else {
                    $(".js_message").html("请选择操作");
                    return;
                }

                if (ele_id == "none" && (operation == "click" || operation == "input" || operation == "check")){
                    $(".js_message").html("请选择元素");
                    return;
                }

                if (input_data == '' && (operation == 'input' || operation == "swipLeft" || operation == "swipRight" || operation == "swipUp" || operation == "swipDown" || operation == "function" || operation == "tap")) {
                    $(".js_message").html("数据不能为空");
                    return;
                }

            }
            var data = {
                "type": "add",
                "case_name": $("#title").val(),
                "steps": steps,
                "simple_desc": $("#remark").val(),
                "belong_project_id": $("#projectSelect option:selected").val()
            };
            $.ajax({
                url: "/ui/add_case/",
                type: "post",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (res) {
                    console.log(res)
                    if (res["code"] == 0) {
                        //重新获取下列表
                        alert("添加成功");
                        window.location.href = '/ui/case_list/';
                    } else {
                        $(".js_message").html(res["message"]);
                    }
                }
            });
        }
        /**
         * 向上拖动
         */
        function up(obj) {
            var objParentTR = $(obj).parent().parent();
            var prevTR = objParentTR.prev();
            if (prevTR.length > 0) {
                prevTR.insertAfter(objParentTR);
            }
        }

        /**
         * 向下拖动
         */
        function down(obj) {
            var objParentTR = $(obj).parent().parent();
            var nextTR = objParentTR.next();
            if (nextTR.length > 0) {
                nextTR.insertBefore(objParentTR);
            }
        }
    </script>
{% endblock %}
{% block content %}
    <div id="page-wrapper">
        <div id="page-inner">
            <!--内容-->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body width-p8" style="min-height:500px">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="firstname" class="col-sm-1 control-label">用例标题</label>
                                    <div class="col-sm-11">
                                        <input id='title' type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-1 control-label">所属项目</label>
                                    <div class="col-sm-11">
                                        <select id='projectSelect' class="form-control">
                                            <option value="none">选择项目</option>
                                            {% for project in project_obj %}
                                                <option value="{{ project.id }}">{{ project.project_name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <!--步骤-->
                                <div id="">
                                    <div class="form-group">
                                        <label for="firstname" class="col-sm-1 control-label">步骤</label>
                                        <div class="col-sm-11">
                                            <div class="table-responsive">
                                                <a class="btn btn-success pointer" data-toggle="modal"
                                                   onclick=gotoAddStep()>添加步骤</a>
                                                <table class="table table-striped table-bordered table-hover"
                                                       style="margin-top: 13px;">
                                                    <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>操作</th>
                                                        <th>页面</th>
                                                        <th>元素</th>
                                                        <th>数据</th>
                                                        <th>必要步骤</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="steps">
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!--end步骤-->

                                <div class="form-group">
                                    <label for="lastname" class="col-sm-1 control-label">描述信息</label>
                                    <div class="col-sm-11">
                                        <textarea id="remark" class="form-control" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-1 control-label"></label>
                                    <div class="col-sm-10 js_message text-danger"></div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-1 control-label"></label>
                                    <div class="col-sm-11">
                                        <button type="button" class="btn btn-primary mar-rignt-20"
                                                onclick="saveCase()">保存
                                        </button>
                                        <button type="button" class="btn btn-default"
                                                onclick="javascript:window.location.href='/ui/case_list'">取消
                                        </button>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--内容-->

            <!--内容end-->
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!--======-end 添加步骤-->

{% endblock %}